<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令</title>
		<style>
			/*为属性设置隐藏*/
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<!-- 1.指令练习 v-cloak
				当浏览器解析JS完成前，用户看到的数据是{{msg}}，
				直到浏览器加载完成全部的JS，则{{msg}}替换为具体的数据
				需求：不想让用户看见没有解析的数据，使用v-cloak属性
			-->
			测试：v-clock指令
			<h1 v-cloak>{{msg}}</h1>
			<hr>
			<!-- 2.v-text 将上述v-cloak优化了 -->
			测试：v-text指令
			<h2 v-text="msg"></h2>
			<hr>
			<!-- 3.v-html 让浏览器解析html之后展示 -->
			测试：v-html指令
			<span v-html="html"></span>
			<hr>
			<!-- 4.需求：只想展现{{msg}}不需要解析
				语法：v-pre vue直接跳过该标签不解析
			 -->
			测试：v-pre指令
			<span v-pre>{{msg}}</span>
			<hr>
			<!-- 5.需求：元素只解析1次 之后用户随意修改，数据不变-->
			v-once: 数据只解析一次<br>
			<span v-once>{{one}}</span>
			
		</div>
			<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
			<script>
				const app = new Vue({
					el: "#app",
					data: {
						msg: '测试数据',
						html: '<h3>测试html语法</h3>',
						one: '数据解析1次'
					}
				})
			</script>
	</body>
</html>
